<template>
  <div class="p-16px">
    <el-card>
      <el-space wrap :size="16">
        <div class="flex items-center whitespace-nowrap">
          补货员：
          <el-input
            placeholder="请输入内容"
            v-model="params.employeeName"
            clearable
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          手机号：
          <el-input
            placeholder="请输入内容"
            v-model="params.phone"
            clearable
          ></el-input>
        </div>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="primary" plain @click="handleCreate">添加</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="编号" width="80" />
        <el-table-column prop="employeeName" label="补货员" min-width="180" />
        <el-table-column
          prop="distributorInfoNameChain"
          label="所属代理"
          min-width="180"
        />
        <el-table-column prop="phone" label="手机号" min-width="180" />
        <el-table-column
          prop="lastLoginTime"
          label="最近登录时间"
          min-width="180"
        />
        <el-table-column
          prop="createTime"
          label="操作"
          width="280"
          fixed="right"
        >
          <template #default="scope">
            <el-button type="primary" plain>分配设备</el-button>
            <el-button type="primary" @click="handleUpdate(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:currentPage="params.current"
          v-model:page-size="params.size"
          layout="prev, pager, next"
          background
          :total="total"
          @current-change="fetchEmployeeList"
        />
      </div>
    </el-card>
    <el-dialog
      :title="form.id ? '编辑用户' : '新建用户'"
      v-model="isShowDialog"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="isShowDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import dayjs from "dayjs";
const userStore = useUserStore();
const params = ref({
  name: "",
  phone: "",
  current: 1,
  size: 10,
  roleType: 2,
});
const tableData = ref([]);
const isShowDialog = ref(false);
const loading = ref(false);
const defaultFormData = {
  userName: "",
  phone: "",
  loginTime: "",
  password: "",
  roleList: [2],
};
const form = ref({
  ...defaultFormData,
});
const total = ref(0);
const fetchEmployeeList = () => {
  loading.value = true;
  userStore
    .getEmployeeList(params.value)
    .then((res) => {
      tableData.value = res.records.map((item) => ({
        ...item,
        lastLoginTime: item.lastLoginTime
          ? dayjs(item.lastLoginTime).format("YYYY-MM-DD HH:mm:ss")
          : "",
      }));
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSubmit = () => {
  if (form.value.id) {
    form.value.roleIds = form.value.roleList;
    userStore.updateEmployee(form.value).then(() => {
      fetchEmployeeList();
      isShowDialog.value = false;
    });
  } else {
    form.value.employeeName = form.value.userName;
    form.value.roleIds = form.value.roleList;
    userStore.createEmployee(form.value).then(() => {
      fetchEmployeeList();
      isShowDialog.value = false;
    });
  }
};

const handleCreate = () => {
  form.value = { ...defaultFormData };
  isShowDialog.value = true;
};

const handleUpdate = (row) => {
  form.value = { ...row, roleList: row.roleList.map((item) => item.id) };
  isShowDialog.value = true;
};

const handleDelete = (row) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "删除中...";
        userStore
          .deleteEmployee({ idList: row.id })
          .then(() => {
            done();
            fetchEmployeeList();
          })
          .finally(() => {
            instance.confirmButtonLoading = false;
            instance.confirmButtonText = "确定";
          });
      } else {
        done();
      }
    },
  });
};

const handleSearch = () => {
  params.value.current = 1;
  fetchEmployeeList();
};

onMounted(() => {
  fetchEmployeeList();
});
</script>

<style lang="scss" scoped></style>
